---
layout: default
title: Timepicker for Twitter Bootstrap
---


<!-- Timepicker
================================================== -->
<section id="timepicker">
    <div class="center jumbotron" style="margin: 0; padding: 0;">
        <br>
        <br>
        <br>
        <h1>Bootstrap Timepicker</h1>
        <br>
        <p class="lead">Easily select a time for a text input using your mouse or keyboards arrow keys.</p>
        <p><a href="http://travis-ci.org/jdewit/bootstrap-timepicker"><img style="max-width:100%; height: 15px;" alt="Build Status" src="https://secure.travis-ci.org/jdewit/bootstrap-timepicker.png" target="_blank"></a></p>
        <hr>
        <div class="row">
            <div class="span4 center">
                <a href="https://github.com/jdewit/bootstrap-timepicker" target="_blank" class="btn btn-large btn-primary"><i class="icon-share-alt icon-white"></i> View Github Project</a>
            </div>
            <div class="span4 center">
                <a href="http://www.pledgie.com/campaigns/19125"><img alt="Click here to support bootstrap-timepicker and make a donation with pledgie!" src="http://www.pledgie.com/campaigns/19125.png?skin_name=chrome" border="0" target="_blank"/></a>
            </div>
            <div class="span4 center">
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://jdewit.github.com/bootstrap-timepicker"></a>
<noscript><a href="http://flattr.com/thing/1116513/Bootstrap-Timepicker" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
            </div>
        </div>
    </div>
    <br>
    <br>
    <h1>Installation</h1>
    <hr>
    <div>
        <p>This project is registered as a <a href="http://bower.io">Bower</a> package, and can be insalled with the following command:</p>
<pre class="prettyprint linenums">
    $ bower install bootstrap-timepicker
</pre>
        <p>
            You can also download our latest release (and any previous release) 
            <a href="https://github.com/jdewit/bootstrap-timepicker/releases">here</a>.
        </p>
    </div>
    <hr>
    <h1>Demos</h1>
    <hr>
    <p>Default timepicker. Value = (<span id="timeDisplay"></span>)</p>
    <div class="input-group bootstrap-timepicker timepicker">
        <input id="timepicker1" class="form-control input-small" type="text"/><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
    </div>
    &nbsp;
    <a href="#timepicker1Source" data-toggle="collapse">+ View Source</a>
    <div id="timepicker1Source" class="collapse">
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;link type="text/css" href="css/bootstrap.min.css" /&gt;
        &lt;link type="text/css" href="css/bootstrap-timepicker.min.css" /&gt;
        &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap-timepicker.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="input-group bootstrap-timepicker timepicker"&gt;
            &lt;input id="timepicker1" type="text" class="form-control input-small"&gt;
            &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;/div&gt;

        &lt;script type="text/javascript"&gt;
            $('#timepicker1').timepicker();
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
    </div>
    <hr class="soften">
    <p>Inside a modal with 24hr mode and seconds enabled.</p>
    <div class="input-group bootstrap-timepicker timepicker">
        <input id="timepicker2" class="form-control input-small" type="text"/><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
    </div>
    &nbsp;
    <a href="#timepicker2Source" data-toggle="collapse">+ View Source</a>
    <div id="timepicker2Source" class="collapse">
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;link type="text/css" href="css/bootstrap.min.css" /&gt;
        &lt;link type="text/css" href="css/bootstrap-timepicker.min.css" /&gt;
        &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap-timepicker.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="input-group bootstrap-timepicker timepicker"&gt;
            &lt;input id="timepicker2" type="text" class="form-control input-small"&gt;
            &lt;span class="input-group-addon"&gt;
                &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;
            &lt;/span&gt;
        &lt;/div&gt;

        &lt;script type="text/javascript"&gt;
            $('#timepicker2').timepicker({
                minuteStep: 1,
                template: 'modal',
                appendWidgetTo: 'body',
                showSeconds: true,
                showMeridian: false,
                defaultTime: false
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
   </div>
   <hr class="soften">
   <p>Without component markup, keyboard input disabled and floated right.</p>
   <div class="input-group bootstrap-timepicker timepicker pull-right" style="height: 2em;">
        <a  href="#timepicker3Source" data-toggle="collapse">+ View Source </a>
        &nbsp;
       <input id="timepicker3" class="form-control input-small" type="text" />
   </div>
   <br>
   <br>
   <div id="timepicker3Source" class="collapse">
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;link type="text/css" href="css/bootstrap.min.css" /&gt;
        &lt;link type="text/css" href="css/bootstrap-timepicker.min.css" /&gt;
        &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap-timepicker.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="input-group bootstrap-timepicker timepicker pull-right"&gt;
            &lt;input id="timepicker3" type="text" class="form-control input-small"&gt;
        &lt;/div&gt;

        &lt;script type="text/javascript"&gt;
            $('#timepicker3').timepicker({
                minuteStep: 5,
                showInputs: false,
                disableFocus: true
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
   </div>
   <hr class="soften">
   <p>Inside a modal with backdrop enabled, inputs disabled and with a preset value.</p>
		<div id="timepicker4Modal" class="modal hide fade">
			<div class="modal-header">
				<h1>A Timepicker Inside A Modal</h1>
			</div>
			<div class="modal-body" style="min-height: 150px;">
				 <span class="input-group bootstrap-timepicker timepicker" style="vertical-align: middle;">
						 <input id="timepicker4" class="form-control input-small" value="10:35 AM" type="text" />
						 <i class="glyphicon glyphicon-time" style="margin: -2px 0 0 -22.5px; pointer-events: none; position: relative;"></i>
				 </span>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn btn-primary" data-dismiss="modal">OK</a>
			</div>
		</div>
   &nbsp;
   &nbsp;
		<a class="btn btn-primary" href="#timepicker4Modal" data-toggle="modal">Open Modal</a>
   <a href="#timepicker4Source" data-toggle="collapse"> + View Source</a>

   <div id="timepicker4Source" class="collapse">
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;link type="text/css" href="css/bootstrap.min.css" /&gt;
        &lt;link type="text/css" href="css/bootstrap-timepicker.min.css" /&gt;
        &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap-timepicker.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
				&lt;div&gt; class="modal hide fade"&gt;
					&lt;div class="modal-header"&gt;
						&lt;h1&gt;Timepicker inside a modal&lt;/h1&gt;
					&lt;/div&gt;
					&lt;div class="modal-body"&gt;
						&lt;div class="input-group bootstrap-timepicker timepicker"&gt;
								&lt;input id="timepicker4" type="text" value="10:35 AM" class="form-control input-small"&gt;
								&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;&lt;/span&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;

        &lt;script type="text/javascript"&gt;
            $('#timepicker4').timepicker({
                minuteStep: 1,
                secondStep: 5,
                showInputs: false,
                template: 'modal',
                modalBackdrop: true,
                showSeconds: true,
                showMeridian: false
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
   </div>
   <hr class="soften">
   <p>Without a template.</p>
   <span class="input-group bootstrap-timepicker timepicker">
       <input id="timepicker5" class="form-control input-small" type="text" />
       <i class="glyphicon glyphicon-time" style="margin: -2px 0 0 -22.5px; pointer-events: none; position: relative;"></i>
   </span>
    &nbsp;
    <a href="#timepicker5Source" data-toggle="collapse"> + View Source</a>
   <div id="timepicker5Source" class="collapse">
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;link type="text/css" href="css/bootstrap.min.css" /&gt;
        &lt;link type="text/css" href="css/bootstrap-timepicker.min.css" /&gt;
        &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/bootstrap-timepicker.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="bootstrap-timepicker"&gt;
            &lt;input id="timepicker5" type="text" class="input-small"&gt;
            &lt;i class="icon-time"&gt;&lt;/i&gt;
        &lt;/div&gt;

        &lt;script type="text/javascript"&gt;
            $('#timepicker5').timepicker({
                template: false,
                showInputs: false,
                minuteStep: 5
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
    </div>
    <hr>
    <h1>Configuration</h1>
    <hr>
    <h3>template <small>The picker widget template</small></h3>
    <div class="well">
        <table class="options-table table table-bordered table-striped table-rounded">
            <thead>
                <tr>
                    <th style="width: 25%;">Name</th>
                    <th style="width: 25%;">Options / Defaults</th>
                    <th style="widget: 50%;">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>template</td>
                    <td>
                        'dropdown' (default)<hr />
                        'modal' <hr />
                        false
                    </td>
                    <td>
                        Show picker in a dropdown <hr />
                        Show picker in a modal <hr />
                        Don't show a widget
                    </td>
                </tr>
                <tr>
                    <td>maxHours</td>
                    <td>24</td>
                    <td>Specify a maximum number of hours the TimePicker can handle. showMeridian must be set to false</td>
                </tr>
                <tr>
                    <td>snapToStep</td>
                    <td>false</td>
                    <td>If true, setting the time will snap it to the closest "step", either minute or second, depending on which unit is currently highlighted. If the number would otherwise snap to 60 higher, the unit "overflows" to 0.</td>
                </tr>
                <tr>
                    <td>minuteStep</td>
                    <td>15</td>
                    <td>Specify a step for the minute field.</td>
                </tr>
                <tr>
                    <td>showSeconds</td>
                    <td>false</td>
                    <td>Show the seconds field.</td>
                </tr>
                <tr>
                    <td>secondStep</td>
                    <td>15</td>
                    <td>Specify a step for the second field.</td>
                </tr>
                <tr>
                    <td>defaultTime</td>
                    <td>
                        'current' (default) <hr />
                        '11:45 AM' <hr />
                        false
                    </td>
                    <td>
                        Set to the current time. <hr />
                        Set to a specific time. <hr />
                        Do not set a default time
                    </td>
                </tr>
                <tr>
                    <td>showMeridian</td>
                    <td>
                        true (default) <hr />
                        false
                    </td>
                    <td>
                        12hr mode<hr />
                        24hr mode
                    </td>
                </tr>
                <tr>
                    <td>showInputs</td>
                    <td>
                        true (default) <hr />
                        false
                    </td>
                    <td>
                        Shows the text inputs in the widget. <hr />
                        Hide the text inputs in the widget
                    </td>
                </tr>
                <tr>
                    <td>disableFocus</td>
                    <td>false</td>
                    <td>Disables the input from focusing. This is useful for touch screen devices that display a keyboard on input focus.</td>
                </tr>
                <tr>
                    <td>disableMousewheel</td>
                    <td>false</td>
                    <td>Disables the input from changing on mousewheel events</td>
                </tr>
                <tr>
                    <td>modalBackdrop</td>
                    <td>false</td>
                    <td>Show modal backdrop.</td>
                </tr>
                <tr>
                    <td>appendWidgetTo</td>
                    <td>body</td>
                    <td>Allow for custom placing of the widget</td>
                </tr>
                <tr>
                    <td>explicitMode</td>
                    <td>false</td>
                    <td>When true, user can type "123" to set time to "1:23" or "12345" to set time to "1:23:45".</td>
                </tr>
                <tr>
                    <td>icons</td>
                    <td>
                        <pre><code>
{
    up: 'glyphicon glyphicon-chevron-up',
    down: 'glyphicon glyphicon-chevron-down'
}
</code></pre>
                    </td>
                    <td>An object with keys 'up' and 'down' representing CSS class names to be used for the widget's icon classes.</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <h3>Data Attributes</h3>
        <p>The timepicker can be instantiated lazily without using javascript using <code>data-provide="timepicker"</code>.</p>
<pre class="prettyprint linenums">
  &lt;div class="input-group bootstrap-timepicker timepicker"&gt;&lt;input id="timepicker" class="form-control" data-provide="timepicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/&gt;&lt;/div&gt;
</pre>
        <p>Configuration options can also be set with the use of data attributes. </p>
<pre class="prettyprint linenums">
  &lt;div class="input-group bootstrap-timepicker timepicker"&gt;&lt;input id="timepicker" class="form-control" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/&gt;&lt;/div&gt;
</pre>
    </div>
    <hr>
    <h1>Methods</h1>
    <hr>
    <h3>showWidget <small>Show the picker widget</small></h3>
<pre class="prettyprint linenums">
  var time = $('#timepicker').timepicker('showWidget');
</pre>
    <h3>setTime <small>Set the time manually</small></h3>
<pre class="prettyprint linenums">
  $('#timepicker').timepicker('setTime', '12:45 AM');
</pre>
    <hr>
    <h1>Events</h1>
    <hr>
    <div>
        <h3> Show <small>Triggered when dropdown/modal widget is shown</small></h3>
<pre class="prettyprint linenums">
  $('#timepicker').timepicker().on('show.timepicker', function(e) {
    console.log('The time is ' + e.time.value);
    console.log('The hour is ' + e.time.hours);
    console.log('The minute is ' + e.time.minutes);
    console.log('The meridian is ' + e.time.meridian);
  });
</pre>
        <h3>Hide <small>Triggered when widget is hidden</small></h3>
<pre class="prettyprint linenums">
  $('#timepicker').timepicker().on('hide.timepicker', function(e) {
    console.log('The time is ' + e.time.value);
    console.log('The hour is ' + e.time.hours);
    console.log('The minute is ' + e.time.minutes);
    console.log('The meridian is ' + e.time.meridian);
  });
</pre>
        <h3>Update <small>Triggered when the date is updated</small></h3>
<pre class="prettyprint linenums">
  $('#timepicker').timepicker().on('changeTime.timepicker', function(e) {
    console.log('The time is ' + e.time.value);
    console.log('The hour is ' + e.time.hours);
    console.log('The minute is ' + e.time.minutes);
    console.log('The meridian is ' + e.time.meridian);
  });
</pre>
<hr>
    </div>
</section>
